//path模块 处理路径的 
const path = require('path');
//引入创建html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//提取css的代码，采用link的方法连接css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//对css的代码进行压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//让打包后在一行显示（压缩）
const Terser  = require("terser-webpack-plugin");

module.exports = {
    mode:"development", //打包使用开发模式
    devtool: 'eval-cheap-source-map',
   entry:{
       index:"./src/routes/index.js",
   },
   //打包后文件的输出
  output: {
     //filename: 'js/bundle.js',
     //如果是多入口的话 文件的名字一定要重新修改
    filename:'js/[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, //清理dist的文件夹
    //自定义图片的名字
    assetModuleFilename: 'images/[hash][ext][query]'
  },
  devServer: {
    //从什么位置查找文件
    static: './dist',
    port:9000,  //修改端口号
    //配置代理服务
    proxy: {
      '/api': {
        target: 'http://localhost:4000', //代码的目标
        pathRewrite: { '^/api/': '/' }, //url重写
      },
    },
  },
  //配置插件
  plugins: [
    new HtmlWebpackPlugin({
      title: '学生管理系统',//配置html的标题
      template:"./src/index.html", //以该html文件为模板
      inject:"body" //把script添加body 中
    }),
    //css插件
    new MiniCssExtractPlugin({
        filename: "css/[name].[contenthash].css",
      }),
  ],
  module: {
      //配置的规则
    rules: [
      {
        test: /\.css$/i,
        //加载的顺序是从后面到前面
        //use: ['style-loader', 'css-loader'],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //处理图片的
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        //自定义图片的名字（优先级要高于：assetModuleFilename）
        generator: {
            filename: 'images/[hash][ext][query]'
          },
        //控片的大小
        // 当图片的小于8k(默认),则以inline，则打包一个BASE64的字符串嵌入bundle.js中 
        //如果图片大于8k 则以resource，打包成一个图片  
         parser: { 
            dataUrlCondition: {
              maxSize: 4*1024 // 8kb
            }
          } 
      },
      //使用babel插件 
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ],
  },
  //优化代码
  optimization: {
      //压缩
    minimize:true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      //压缩css的代码
      new CssMinimizerPlugin(),
      //压缩js的代码
      new Terser()
    ],
  },
};